<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>注册界面</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <form action="#" method="post">
        <table align="left">
            <caption><h3>悠韵幻音岛用户注册</h3></caption>
            <tr>
                <td>
                    <fieldset>
                        <legend>身份验证-必填信息</legend>
                        <table>
                            <tr>
                                <td align="right">用户名</td>
                                <td><input type="text" placeholder="请输入用户名" name="username" autofocus /></td>
                            </tr>
                            <tr>
                                <td align="right">密码</td>
                                <td><input type="password" placeholder="请输入密码" name="password" /></td>
                            </tr>
                            <tr>
                                <td align="right">确认密码</td>
                                <td><input type="password" placeholder="请输入密码" name="repassword" /></td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td>
                    <fieldset>
                        <legend>身份信息-选填信息</legend>
                        <table>
                            <tr>
                                <td align="right">所在城市</td>
                                <td>
                                    <!-- multiple -->
                                    <select name="city" >
                                        <option value="henan">河南</option>
                                        <option value="shanghai">上海</option>
                                        <option value="beijing">北京</option>
                                        <option value="hangzhou" >杭州</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">性别</td>
                                <td>
                                    <input type="radio" name="gender" value="male" />男
                                    <input type="radio" name="gender" value="female"/>女
                                </td>
                            </tr>
                            <tr>
                                <td align="right">头像</td>
                                <td>
                                    <input type="file" name="avatar" multiple />
                                </td>
                            </tr>
                            <tr>
                                <td align="right">喜爱歌星</td>
                                <td>
                                    <input type="checkbox" name="hobby" value="ball" />周杰伦
                                    <input type="checkbox" name="hobby" value="code" checked />林俊杰
                                    <input type="checkbox" name="hobby" value="music"  checked />陈奕迅
                                </td>
                            </tr>
                            <tr>
                                <td align="right">喜爱音乐类型</td>
                                <td>
                                    <input type="checkbox" name="hobby" value="ball" />热血
                                    <input type="checkbox" name="hobby" value="code"  />伤感
                                    <input type="checkbox" name="hobby" value="music"   />DJ
                                    <input type="checkbox" name="hobby" value="music"   />2024最火歌曲
                                    <input type="checkbox" name="hobby" value="music"   />JJ
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            
            <tr>
                <td align="center">
                    <input type="submit" value="提交" />
                    <input type="reset" value="重置" />
                </td>
            </tr>
            </tr>
        </table>
    </form>
</body>
</html>